<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Jquery 文档操作</title>
</head>
<body>

<div class="c1">
    <p>pppp</p></div>
<button>add</button>



<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script>
    $("button").click(function () {
        var $ele=$("<h1>");
        $ele.html("hello yuan");
        $ele.css("color",'red');
        // 1.内部插入
        // $(".c1").append($ele)；// 父亲认儿子
        // $ele.appendTo('.c1')；  // 儿子认父亲
        // $(".c1").prepend($ele);// 父亲认儿子添加在之前
        // $ele.prependTo('.c1');// 儿子认父亲添加在之前
        // 2.外部插入
        // $(".c1").after($ele) ;// 认兄弟、添加在之后
        // $(".c1").before($ele);// 认兄弟、添加在之前
        // $ele.insertAfter(".c1")// 认兄弟、添加在之后
        // $ele.insertBefore(".c1")// 认兄弟、添加在之后
        //    3.替换
        // $('p').replaceWith($ele)
        // 4.删除与清空
        // $(".c1").empty();// 清空
        // $(".c1").remove();// 删除
        // 4.克隆
        var $ele1= $(".c1").clone();
        $(".c1").append($ele1)
    })
</script>
</body>
</html>